<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rich Text Editor with Image Insert</title>
    <!-- 导入 Quill 样式和脚本 -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/quill.snow.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/comm.css"/>
    <link rel="stylesheet" href="../css/add.css"/>
    
</head>
<body>
    <header>
        <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
    </header>
    
    <div id="app">
        <div id="title">
            <textarea placeholder="请输入标题" v-model="title"></textarea>
            <div class="mb-3">
                分类:<select class="form-select" v-model="selectedOption">
                    <option v-for="option in options" :value="option.type_number" >
                        {{ option.type_name }}
                    </option>
                </select>
            </div>
        </div>
        <div id="edit"></div>
        <button type="button" class="btn btn-primary add" @click="add">提交</button>
    </div>

    <script src="../js/quill.js"></script>

    <script>
        // 添加页面，修改和添加都用一个
        new Vue({
            el: "#app",
            data: {
                editor: null,// 富文本编辑器内容
                text: "",// 存文本内容，不包含h5标签
                title:"",// 文章标题
                imagePath:"",//图片地址
                desc:"",//详细内容
                id:"",//作者id
                base64:"",//图片base64编码
                plantId:"",//文章id
                plants:{},//这是文章详情
                 // 添加options数组
                options: [
                    { text: '植物1', value: '1' },
                    { text: '植物2', value: '2' },
                    { text: '植物3', value: '3' },
                    
                ],
                selectedOption: '' // 绑定v-model的值
            },
            created(){
                this.getTypes()
            },
            // 计算属性，用来初始化
            async mounted() {
                await this.getIdFromUrl();// 判断是否是添加或修改的方法
                this.initEditor();// 初始化富文本编辑器
               
            },
            methods: {
                    //获取所有分类
                    //获取所有分类
                    async getTypes(){
                        try {
                                // 使用fetch发起GET请求
                                const response = await fetch('http://localhost:5000/type/list');
                                const data = await response.json();
                                // 请求成功时更新热门列表数据
                                this.options = data.data
                                
                            } catch (error) {
                                // 请求失败时处理错误
                                console.error('Error fetching data:', error);
                                
                            }
                    },
                // 獲取請求頭是否有文章id
                async getIdFromUrl() {  
                    // 从请求中获取文章id
                    const searchParams = new URLSearchParams(window.location.search);  
                    this.plantId = searchParams.get('id'); 
                    // 如果文章id不为空就是修改（查询文章详情）
                    if(this.plantId != null && this.plantId != ""){
                        console.log("有id，執行修改")
                        const response = await fetch('http://localhost:5000/plants/getPlantsById?id='+this.plantId);
                        const data = await response.json();
                        if(data.code == 200){
                            this.plants = data.data[0]
                            // 给文章详情赋值
                            this.text = this.plants["text"]
                            this.title = this.plants["title"]
                            this.imagePath = this.plants["image_path"]
                            this.desc = this.plants["description"]
                            this.selectedOption = this.plants["type_number"]
                        }
                    } 
                },
                // 修改文章
                async updatePlants(){
                    // 文章信息
                    let jsonData = {
                        "title":this.title,
                        "imgPath":this.imagePath,
                        "desc":this.desc,
                        "id":this.plantId,
                        "text":this.text
                    }
                        const response = await fetch('http://localhost:5000/plants/update',{
                        method: 'POST', // 指定请求方法为POST  
                        headers: {  
                            'Content-Type': 'application/json', // 设置请求头，指定发送的数据类型为JSON  
                        }, 
                        body: JSON.stringify(jsonData), // 将JavaScript对象转换为JSON字符串作为请求体发送
                    });
                    // 拿到返回值
                    const data =await response.json()
                    if(data.code == 200){
                        alert("修改成功")
                        setTimeout(() => {
                            window.location.href = "/html/me.html"
                        },500)
                    }
                },
                // 添加文章
                async addPlants(){
                    // 判断点击添加的事件
                    // 如果文章id不为空，就是修改，执行修改
                    if(this.plantId != null && this.plantId != ""){
                        this.updatePlants()
                        return
                    }
                    // 判断是否有title值
                    if(this.title == null && this.title == ""){
                        alert("内容为空")
                        return
                    }
                     
                    // 增加方法放数据
                    let jsonData = {
                        "title":this.title,
                        "desc":this.desc,
                        "imagePath":this.imagePath,
                        "id":sessionStorage.getItem("id"),
                        "text":this.text,
                        "typeNumber":this.selectedOption
                    }
                    const response = await fetch('http://localhost:5000/plants/add',{
                    method: 'POST', // 指定请求方法为POST  
                    headers: {  
                        'Content-Type': 'application/json', // 设置请求头，指定发送的数据类型为JSON  
                    }, 
                    body: JSON.stringify(jsonData), // 将JavaScript对象转换为JSON字符串作为请求体发送
                    
                    });
                    // post
                    const data =await response.json()
                    if(data.code == 200){
                        this.title = ""
                        alert("添加成功")
                    }else{
                        alert("添加失败")
                    }
                },
                //上传图片
                async putImg(){
                   // 上传传入base64的图片数据
                    let jsonData = {
                        "base64":this.base64,
                        "url":""
                    }
                    const response = await fetch('http://localhost:5000/img/putImg',{
                    method: 'POST', // 指定请求方法为POST  
                    headers: {  
                        'Content-Type': 'application/json', // 设置请求头，指定发送的数据类型为JSON  
                    }, 
                    body: JSON.stringify(jsonData), // 将JavaScript对象转换为JSON字符串作为请求体发送
                    
                    });
                    // post
                    const data =await response.json()
                    // 上传成功返回图片地址
                    this.imagePath = data.data
                },
                // 添加方法
                add(){
                    // 点击添加执行
                    this.addPlants()
                },
                // 初始化富文本编辑器
                initEditor() {
                    this.editor = new Quill("#edit", {
                        theme: "snow", // 使用 snow 主题，其他主题可根据需求选择
                        modules: {
                            toolbar: [
                                ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
                                [{ 'align': [] }],
                                ['image'],  // 插入图片按钮
                            ],
                        },
                    });

                    // 设置编辑器初始内容
                    this.editor.clipboard.dangerouslyPasteHTML(this.desc);
                    // 监听文本变化事件
                    this.editor.on("text-change", this.handleTextChange);

                    // 监听插入图片事件
                    this.editor.getModule('toolbar').addHandler('image', this.handleImageInsert);
                },
                handleTextChange() {
                    // 打印编辑器中的文本到控制台
                    this.desc = this.editor.root.innerHTML
                    // 纯文本内容
                    this.text = this.editor.root.innerText
                },
                // 上传图片的方法
                handleImageInsert() {
                    // 弹出文件选择框
                    const input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
                    input.addEventListener('change', () => {
                        const file = input.files[0];
                        if (file) {
                            this.insertImage(file);
                        }
                    });
                    input.click();
                },
                insertImage(file) {
                    const range = this.editor.getSelection();
                    const position = range ? range.index : 0;

                    // 将图片转成 base64
                    const reader = new FileReader();
                    reader.onload =async (event) => {
                        const base64Data = event.target.result;
                        // base64去了图片表示
                        let newBase64String = base64Data.replace(/^data:image\/\w+;base64,/, "");  
                        this.base64= newBase64String
                        
                        await this.putImg();
                        // 插入图片
                        this.editor.insertEmbed(position, 'image', this.imagePath);
                        
                    };

                    reader.readAsDataURL(file);
                },
            },
        });
    </script>
</body>
</html>
